<template>
  <div class="users">
    <!-- // 面包屑 -->
    <MBX l1="用户管理" l2="用户列表"></MBX>
    <!-- // 卡片 -->
    <el-card class="xia">
      <el-input
        placeholder="请输入内容"
        v-model="form.query"
        class="input-with-select"
        @input="sreachUsers"
        clearable
        @clear="sreachUsers"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="sreachUsers"
        ></el-button>
      </el-input>
      <el-button type="primary" class="btn" @click="TanUers"
        >添加用户</el-button
      >
      <!-- // 表格 -->
      <el-table border class="xia" :data="Datatable">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="角色" prop="role_name"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div>
              <el-switch
                v-model="scope.row.mg_state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="status(scope.row)"
              >
              </el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="Tanedit(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="delUsers(scope.row.id)"
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-s-tools"
                size="mini"
                @click="Tanshe(scope.row)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- // 分页 -->
      <el-pagination
        class="xia"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="form.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- // 添模态框 -->
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
      <el-form
        :model="formUsers"
        :rules="rulesUsers"
        label-width="100px"
        ref="ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formUsers.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formUsers.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formUsers.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="formUsers.mobile"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUsers">确 定</el-button>
      </div>
    </el-dialog>
    <!-- // 编辑模态框 -->
    <el-dialog title="编辑用户" :visible.sync="dialogFormVis">
      <el-form
        :model="formUsers"
        :rules="rulesUsers"
        label-width="100px"
        ref="ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formUsers.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formUsers.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="formUsers.mobile"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVis = false">取 消</el-button>
        <el-button type="primary" @click="EditUsers">确 定</el-button>
      </div>
    </el-dialog>
    <!-- // 分配模态框 -->
    <el-dialog title="分配角色" :visible.sync="dialogFor">
      <el-form :model="Setform">
        <el-form-item>
          <p>当前的用户：{{ name }}</p>
          <p>当前的角色：{{ role }}</p>
        </el-form-item>
        <el-form-item label="分配新角色">
          <el-select v-model="Setform.rid" placeholder="请选择">
            <el-option
              v-for="(item, index) in roleList"
              :key="index"
              :label="item.roleName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFor = false">取 消</el-button>
        <el-button type="primary" @click="EditRole">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { UserDelsapi } from '@/http/api'
import _ from 'lodash' // 防抖
export default {
  name: '',
  components: {},
  data() {
    // 验证邮箱
    const checkemail = (rule, val, callback) => {
      const regemail = /^([a-zA-Z\d])(\w|)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/
      // // 判空
      // if (val.trim() === '') {
      //   return callback(new Error('请输入邮箱号'))
      // }
      if (!regemail.test(this.formUsers.email)) {
        return callback(new Error('您输入的邮箱号不合法'))
      }
      callback()
    }

    // 验证手机号
    const checkmobile = (rule, val, callback) => {
      const regTel = /^1(3|4|5|7|8|9)\d{9}$/
      // 判空
      // if (val.trim() === '') {
      //   return callback(new Error('请输入手机号'))
      // }
      if (!regTel.test(this.formUsers.mobile)) {
        return callback(new Error('手机号格式不正确'))
      }
      callback()
    }
    return {
      roleList: [],
      roleId: 0,
      Setform: {
        rid: ''
      },
      value: false,
      name: '',
      role: '',
      form: {
        query: '',
        pagenum: 1,
        pagesize: 5
      },
      total: 0,
      Datatable: [], // 表格数据
      dialogFormVisible: false,
      dialogFormVis: false,
      dialogFor: false,
      //   添加数据
      formUsers: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      id: 0,
      rulesUsers: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱号', trigger: 'blur' },
          { validator: checkemail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkmobile, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getUsers()
    // this.status()
  },
  mounted() {},
  methods: {
    async getUsers() {
      const res = await this.$QHL.Usersapi(this.form)
      const { users, total } = res
      this.Datatable = users
      this.total = total
      //   console.log(res)
    },
    // 分配套框
    async Tanshe(row) {
      // console.log(row)
      this.name = row.username
      this.role = row.role_name
      this.roleId = row.id
      const res = await this.$QHL.UserALLRolesapi()
      // console.log(res)
      this.roleList = res
      this.dialogFor = true
    },
    // 分配确定
    async EditRole() {
      await this.$QHL.UserFenRolesapi({
        id: this.roleId,
        rid: this.Setform.rid
      })
      this.getUsers()
      this.dialogFor = false
    },
    // 编辑弹框
    Tanedit(row) {
      this.id = row.id
      this.formUsers = row
      this.dialogFormVis = true
    },
    // 编辑添加
    async EditUsers() {
      // console.log(this.id)
      await this.$QHL.UserEditsapi({
        id: this.id,
        users: this.formUsers
      })
      this.getUsers()
      this.dialogFormVis = false
    },
    // 弹出添加模态框
    TanUers() {
      this.formUsers = {}
      this.dialogFormVisible = true
    },
    // 添加用户
    async addUsers() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) {
          return false
        } else {
          const res = await this.$QHL.UserAddsapi(this.formUsers)
          console.log(res)
          this.getUsers()
          this.formUsers = ''
          this.dialogFormVisible = false
        }
      })
    },
    // 删除用户
    delUsers(id) {
      console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        UserDelsapi(id)
          .then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getUsers()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      })
    },
    // 状态
    async status(val) {
      console.log(val)
      await this.$QHL.UserStatussapi({
        uId: val.id,
        type: val.mg_state
      })
      //   this.getUsers()
    },
    // 搜索
    sreachUsers: _.debounce(function () {
      this.getUsers()
    }, 100),
    // 分页
    handleSizeChange(val) {
      this.form.pagesize = val
      this.getUsers()
    },
    handleCurrentChange(val) {
      this.form.pagenum = val
      this.getUsers()
    }
  }
}
</script>
<style scoped lang="scss">
.input-with-select {
  width: 30%;
}
.btn {
  margin-left: 5px;
}
.el-form-item .el-input {
  width: 80%;
}
</style>
